<template>
    <view class="columnbox wdh-100 content">
        <view class="columnbox wdh-100 score-box">
            <view class="score-num">600</view>
            <view class="score-title">我的积分</view>
            <view class="rowbox score-record">
                <view class="score-title" @click="showRecord">兑换记录</view>
                <view class="score-title">|</view>
                <view class="score-title" @click="jifenmingxi1">积分明细</view>
            </view>
        </view>
        <view class="wdh-100 s-list">
            <view class="coupon-box one-store" v-for="(item,index) in 20" :key='index'>
                <image mode="aspectFill" class="store-img"
                    src="https://img0.baidu.com/it/u=1107695420,655968989&fm=253&fmt=auto&app=138&f=JPEG?w=785&h=500">
                </image>
                <view class="s-title wdh-100 textovflow">兄弟洗车.洗车券</view>
                <view class="rowbox wdh-100 spb" style="margin-bottom: 20rpx;">
                    <view class="s-price">20积分</view>
                    <view class="dh-btn" @click="lijiduihuan(index)">立即兑换</view>
                </view>
            </view>
			
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {}
        },
        methods: {
			// 积分明细
			jifenmingxi1(){
				this.$tab.navigateTo('/packageA/pointsBreakdown/pointsBreakdown')
			},
			// 立即兑换
			lijiduihuan(index){
				this.$tab.navigateTo('/packageB/cashdetails/cashdetails')
			},
            showRecord() {
                uni.navigateTo({
                    url: '/pages/scoreStore/record'
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        background: #f7f8fa;
        min-height: 100vh;
        justify-content: flex-start;
        font-family: PingFang SC;
        width: 100%;
        overflow: hidden;
        padding: 20rpx 32rpx;
    }

    .score-box {
        background: #17698F;
        height: 360rpx;
        border-radius: 20rpx;
        color: #fff;

        .score-num {
            font-size: 50rpx;
        }

        .score-title {
            font-size: 28rpx;
            margin-top: 10rpx;
        }

        .score-record {
            justify-content: space-between;
            width: 400rpx;
            margin-top: 50rpx;
        }
    }

    .s-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 20rpx;

        .one-store {
            border-radius: 20rpx;
            width: 339rpx;
            background: #fff;
            overflow: hidden;
            margin-bottom: 20rpx;

            .store-img {
                border-radius: 20rpx;
                width: 100%;
                height: 220rpx;
            }
        }

        .s-title {
            font-size: 32rpx;
            padding: 10rpx 20rpx;
        }

        .s-price {
            color: #BD3124;
            font-size: 28rpx;
            margin-left: 20rpx;
        }

        .dh-btn {
            background: #17698F;
            color: #fff;
            font-size: 24rpx;
            padding: 10rpx 20rpx;
            line-height: 24rpx;
            margin-right: 20rpx;
            border-radius: 10rpx;
        }
    }
</style>